<template>
  <div>
    <!-- 技术解释区域 -->
    <div style="background-color: #e0f2f1; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #4CAF50;">
      <h3 style="color: #2E7D32; margin-top: 0;">📋 技术解释：列表过渡动画</h3>
      <p><strong>TransitionGroup组件：</strong>Vue提供的 <code>&lt;TransitionGroup&gt;</code> 组件用于为列表中的多个元素添加过渡效果。</p>
      <p><strong>列表渲染：</strong>与 <code>v-for</code> 结合使用，为列表项的增加、删除、移动添加动画效果。</p>
      <p><strong>移动过渡：</strong>通过 <code>v-move</code> 类名为元素位置变化添加平滑的移动动画。</p>
      <p><strong>交错动画：</strong>可以为列表项添加延迟，创造波浪式的交错动画效果。</p>
    </div>

    <!-- 交互演示区域 -->
    <div style="background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
      <h3>列表过渡动画演示</h3>
      
      <!-- 控制面板 -->
      <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-radius: 4px; border: 1px solid #ddd;">
        <div style="margin-bottom: 15px;">
          <button @click="addItem" style="padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
            添加项目
          </button>
          <button @click="removeItem" style="padding: 10px 20px; background-color: #F44336; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
            删除项目
          </button>
          <button @click="shuffleItems" style="padding: 10px 20px; background-color: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
            随机排序
          </button>
          <button @click="clearAll" style="padding: 10px 20px; background-color: #9E9E9E; color: white; border: none; border-radius: 4px; cursor: pointer;">
            清空列表
          </button>
        </div>
        
        <div style="margin-bottom: 15px;">
          <button @click="changeAnimationType" style="padding: 10px 20px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
            动画类型: {{ animationType }}
          </button>
          <button @click="toggleStagger" style="padding: 10px 20px; background-color: #9C27B0; color: white; border: none; border-radius: 4px; cursor: pointer;">
            交错动画: {{ stagger ? '开启' : '关闭' }}
          </button>
        </div>
        
        <div style="margin-bottom: 10px;">
          <label style="display: inline-block; width: 120px;">过渡时长：</label>
          <input v-model.number="duration" type="range" min="200" max="1000" step="50" style="margin-right: 10px;">
          <span>{{ duration }}ms</span>
        </div>
        
        <div style="margin-bottom: 10px;">
          <label style="display: inline-block; width: 120px;">交错延迟：</label>
          <input v-model.number="staggerDelay" type="range" min="0" max="200" step="20" style="margin-right: 10px;">
          <span>{{ staggerDelay }}ms</span>
        </div>
        
        <div>
          <label style="display: inline-block; width: 120px;">新项目内容：</label>
          <input v-model="newItemText" type="text" placeholder="输入新项目内容" style="padding: 5px; border: 1px solid #ddd; border-radius: 4px; width: 200px;">
        </div>
      </div>

      <!-- 列表展示区域 -->
      <div style="border: 1px solid #ddd; padding: 20px; border-radius: 4px; background-color: white; min-height: 300px;">
        <h4>动态列表 ({{ items.length }} 项)</h4>
        
        <TransitionGroup 
          :name="transitionName" 
          tag="div" 
          class="list-container"
          :duration="duration"
          @before-enter="beforeEnter"
          @enter="enter"
          @leave="leave"
        >
          <div
            v-for="(item, index) in items"
            :key="item.id"
            :class="['list-item', animationType]"
            :style="getItemStyle(index)"
            @click="removeSpecificItem(item.id)"
          >
            <div class="item-content">
              <span class="item-number">{{ index + 1 }}</span>
              <span class="item-text">{{ item.text }}</span>
              <span class="item-time">{{ item.time }}</span>
            </div>
            <div class="item-actions">
              <button @click.stop="moveUp(index)" :disabled="index === 0" style="margin-right: 5px; padding: 2px 6px; font-size: 12px;">↑</button>
              <button @click.stop="moveDown(index)" :disabled="index === items.length - 1" style="padding: 2px 6px; font-size: 12px;">↓</button>
            </div>
          </div>
        </TransitionGroup>
        
        <div v-if="items.length === 0" style="text-align: center; color: #999; padding: 40px;">
          列表为空，点击"添加项目"开始演示
        </div>
      </div>

      <!-- 预设演示 -->
      <div style="margin-top: 20px;">
        <h4>预设演示：</h4>
        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
          <button @click="demoSequentialAdd" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
            顺序添加演示
          </button>
          <button @click="demoRandomOperations" style="padding: 8px 16px; background-color: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer;">
            随机操作演示
          </button>
          <button @click="demoSortAnimation" style="padding: 8px 16px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">
            排序动画演示
          </button>
        </div>
      </div>

      <!-- 状态显示 -->
      <div style="margin-top: 15px; padding: 10px; background-color: #e0f2f1; border-radius: 4px;">
        <strong>当前状态：</strong>
        <p>列表项数: {{ items.length }} | 动画类型: {{ animationType }} | 交错动画: {{ stagger ? '开启' : '关闭' }}</p>
        <p>过渡时长: {{ duration }}ms | 交错延迟: {{ staggerDelay }}ms</p>
      </div>
    </div>

    <!-- 代码示例 -->
    <div style="background-color: #f8f8f8; padding: 15px; border-radius: 4px; margin-top: 20px;">
      <h4>代码示例：</h4>
      <pre style="background-color: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 4px; overflow-x: auto;"><code>&lt;template&gt;
  &lt;TransitionGroup :name="animationType" tag="div"&gt;
    &lt;div v-for="item in items" :key="item.id" class="list-item"&gt;
      &#123;&#123; item.text &#125;&#125;
    &lt;/div&gt;
  &lt;/TransitionGroup&gt;
&lt;/template&gt;

&lt;style&gt;
.slide-enter-active, .slide-leave-active {
  transition: all 300ms ease;
}
.slide-enter-from {
  opacity: 0;
  transform: translateX(-100px);
}
.slide-leave-to {
  opacity: 0;
  transform: translateX(100px);
}
.slide-move {
  transition: transform 300ms ease;
}
&lt;/style&gt;</code></pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuoDu05',
  data() {
    return {
      items: [
        { id: 1, text: '列表项目 1', time: this.getCurrentTime() },
        { id: 2, text: '列表项目 2', time: this.getCurrentTime() },
        { id: 3, text: '列表项目 3', time: this.getCurrentTime() }
      ],
      nextId: 4,
      newItemText: '',
      animationType: 'slide',
      duration: 300,
      stagger: true,
      staggerDelay: 50,
      animationTypes: ['slide', 'fade', 'scale', 'flip', 'bounce']
    };
  },
  computed: {
    transitionName() {
      return this.animationType;
    }
  },
  methods: {
    addItem() {
      const text = this.newItemText.trim() || `列表项目 ${this.nextId}`;
      this.items.push({
        id: this.nextId++,
        text: text,
        time: this.getCurrentTime()
      });
      this.newItemText = '';
    },
    removeItem() {
      if (this.items.length > 0) {
        const randomIndex = Math.floor(Math.random() * this.items.length);
        this.items.splice(randomIndex, 1);
      }
    },
    removeSpecificItem(id) {
      const index = this.items.findIndex(item => item.id === id);
      if (index > -1) {
        this.items.splice(index, 1);
      }
    },
    shuffleItems() {
      for (let i = this.items.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [this.items[i], this.items[j]] = [this.items[j], this.items[i]];
      }
    },
    clearAll() {
      this.items = [];
    },
    moveUp(index) {
      if (index > 0) {
        [this.items[index], this.items[index - 1]] = [this.items[index - 1], this.items[index]];
      }
    },
    moveDown(index) {
      if (index < this.items.length - 1) {
        [this.items[index], this.items[index + 1]] = [this.items[index + 1], this.items[index]];
      }
    },
    changeAnimationType() {
      const currentIndex = this.animationTypes.indexOf(this.animationType);
      this.animationType = this.animationTypes[(currentIndex + 1) % this.animationTypes.length];
    },
    toggleStagger() {
      this.stagger = !this.stagger;
    },
    getCurrentTime() {
      return new Date().toLocaleTimeString();
    },
    getItemStyle(index) {
      return {
        transitionDelay: this.stagger ? `${index * this.staggerDelay}ms` : '0ms'
      };
    },
    beforeEnter(el) {
      el.style.opacity = '0';
      el.style.height = '0';
    },
    enter(el, done) {
      const delay = el.dataset.index * this.staggerDelay;
      setTimeout(() => {
        el.style.transition = `all ${this.duration}ms ease`;
        el.style.opacity = '1';
        el.style.height = 'auto';
        done();
      }, delay);
    },
    leave(el, done) {
      el.style.transition = `all ${this.duration}ms ease`;
      el.style.opacity = '0';
      el.style.height = '0';
      setTimeout(done, this.duration);
    },
    // 预设演示方法
    async demoSequentialAdd() {
      this.clearAll();
      const items = ['第一项', '第二项', '第三项', '第四项', '第五项'];
      for (let i = 0; i < items.length; i++) {
        this.newItemText = items[i];
        this.addItem();
        await new Promise(resolve => setTimeout(resolve, 400));
      }
    },
    async demoRandomOperations() {
      this.clearAll();
      // 先添加一些项目
      for (let i = 1; i <= 5; i++) {
        this.items.push({
          id: this.nextId++,
          text: `随机项目 ${i}`,
          time: this.getCurrentTime()
        });
      }
      
      // 执行随机操作
      for (let i = 0; i < 8; i++) {
        await new Promise(resolve => setTimeout(resolve, 800));
        const operations = ['add', 'remove', 'shuffle'];
        const operation = operations[Math.floor(Math.random() * operations.length)];
        
        switch (operation) {
          case 'add':
            this.newItemText = `动态项目 ${Date.now() % 1000}`;
            this.addItem();
            break;
          case 'remove':
            if (this.items.length > 1) this.removeItem();
            break;
          case 'shuffle':
            this.shuffleItems();
            break;
        }
      }
    },
    async demoSortAnimation() {
      this.clearAll();
      // 添加数字项目
      const numbers = [5, 2, 8, 1, 9, 3, 7, 4, 6];
      numbers.forEach(num => {
        this.items.push({
          id: this.nextId++,
          text: `数字 ${num}`,
          time: this.getCurrentTime()
        });
      });
      
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 排序动画
      this.items.sort((a, b) => {
        const numA = parseInt(a.text.split(' ')[1]);
        const numB = parseInt(b.text.split(' ')[1]);
        return numA - numB;
      });
    },
    getEnterTransform() {
      const transforms = {
        slide: 'translateX(-100px)',
        fade: 'translateY(0)',
        scale: 'scale(0)',
        flip: 'rotateY(90deg)',
        bounce: 'translateY(-50px) scale(0.5)'
      };
      return transforms[this.animationType] || transforms.slide;
    },
    getLeaveTransform() {
      const transforms = {
        slide: 'translateX(100px)',
        fade: 'translateY(0)',
        scale: 'scale(0)',
        flip: 'rotateY(-90deg)',
        bounce: 'translateY(50px) scale(0.5)'
      };
      return transforms[this.animationType] || transforms.slide;
    }
  }
};
</script>

<style scoped>
.list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: linear-gradient(45deg, #4CAF50, #8BC34A);
  border-radius: 8px;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.item-content {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.item-number {
  background: rgba(255,255,255,0.2);
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: bold;
  min-width: 30px;
  text-align: center;
}

.item-text {
  font-weight: 500;
  flex: 1;
}

.item-time {
  font-size: 12px;
  opacity: 0.8;
}

.item-actions {
  display: flex;
  gap: 5px;
}

.item-actions button {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.item-actions button:hover:not(:disabled) {
  background: rgba(255,255,255,0.3);
}

.item-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 滑动动画 */
.slide-enter-active, .slide-leave-active {
  transition: all v-bind(duration + 'ms') ease;
}
.slide-enter-from {
  opacity: 0;
  transform: translateX(-100px);
}
.slide-leave-to {
  opacity: 0;
  transform: translateX(100px);
}
.slide-move {
  transition: transform v-bind(duration + 'ms') ease;
}

/* 淡入淡出动画 */
.fade-enter-active, .fade-leave-active {
  transition: all v-bind(duration + 'ms') ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-move {
  transition: transform v-bind(duration + 'ms') ease;
}

/* 缩放动画 */
.scale-enter-active, .scale-leave-active {
  transition: all v-bind(duration + 'ms') ease;
}
.scale-enter-from {
  opacity: 0;
  transform: scale(0);
}
.scale-leave-to {
  opacity: 0;
  transform: scale(0);
}
.scale-move {
  transition: transform v-bind(duration + 'ms') ease;
}

/* 翻转动画 */
.flip-enter-active, .flip-leave-active {
  transition: all v-bind(duration + 'ms') ease;
}
.flip-enter-from {
  opacity: 0;
  transform: rotateY(90deg);
}
.flip-leave-to {
  opacity: 0;
  transform: rotateY(-90deg);
}
.flip-move {
  transition: transform v-bind(duration + 'ms') ease;
}

/* 弹跳动画 */
.bounce-enter-active, .bounce-leave-active {
  transition: all v-bind(duration + 'ms') cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bounce-enter-from {
  opacity: 0;
  transform: translateY(-50px) scale(0.5);
}
.bounce-leave-to {
  opacity: 0;
  transform: translateY(50px) scale(0.5);
}
.bounce-move {
  transition: transform v-bind(duration + 'ms') ease;
}
</style>